import React, { useState, useEffect, useRef } from 'react'
import { Animated, View, Text, StyleSheet, TouchableWithoutFeedback, StyleProp, ViewStyle, ScrollView } from 'react-native';
import LazyRender from "../LazyRender"
import * as Animatable from 'react-native-animatable';
type Props = {
  show: boolean,
  onChange: (value: boolean) => void,
  style?: StyleProp<ViewStyle>,
  zIndex?: number | string,
  lazyRender?: boolean,
  children?: any,
  duration?: number
}
const Overlay = ({ show, onChange, zIndex = 1, style, lazyRender = true, duration = 300, ...rest }: Props) => {
  const showChange = () => {
    onChange(!show)
    durationTime()
  }
  const [_none, set_none] = useState("none")
  const durationTime = () => {
    if (show) {
      set_none("flex")
      const tt = setTimeout(() => {
        set_none("none")
        clearTimeout(tt)
      }, duration)
    }
  }
  return (
    <LazyRender lazyRender={lazyRender} duration={duration} show={show}>
      <TouchableWithoutFeedback onPress={showChange}>
        <Animatable.View duration={duration} animation={show ? "fadeIn" : "fadeOut"} style={StyleSheet.flatten([styles.overlay, { display: show ? 'flex' : _none, zIndex: Number(zIndex) }, style])}>
          <View style={styles.overlay_content}>
            {rest?.children}
          </View>
        </Animatable.View>
      </TouchableWithoutFeedback>
    </LazyRender>
  )
}
// const LazyRender = ()=>{

// }
const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, .4)',
  },
  overlay_content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
})
export default Overlay